<template>
    <div class="ratings" ref="ratings">
        <div class="ratings-content">
            <div class="overview">
                <div class="overview-left">
                    <h1 class="score">{{seller.score}}</h1>
                    <div class="title">综合评分</div>
                    <div class="rank">高于周边商家{{seller.rank}}</div>
                </div>
                <div class="overview-right">
                    <div class="score-wrapper">
                        <span class="title">服务态度</span>
                        <star :size="36" :score="seller.serviceScore"></star>
                        <span class="score">{{seller.serviceScore}}</span>
                    </div>
                    <div class="score-wrapper">
                        <span class="title">商品评分</span>
                        <star :size="36" :score="seller.foodScore"></star>
                        <span class="score">{{seller.foodScore}}</span>
                    </div>
                    <div class="delivery-wrapper">
                        <span class="title">送达时间</span>
                        <span class="delivery">{{seller.deliveryTime}}分钟</span>
                    </div>
                </div>
            </div>
            <split></split>
            <!--            <ratingselect-->
            <!--                    :rating-select-parm="ratingSelectParm"-->
            <!--                    :ratings="ratings"-->
            <!--            ></ratingselect>-->
            <ul class="rating-wrapper">
                <li v-for="(rating,index) in ratings" :key="index"
                    class="rating-item"
                    v-show="needShow(rating.rateType,rating.text)">
                    <div class="avatar">
                        <img width="28" height="28" :src="rating.avatar">
                    </div>
                    <div class="content">
                        <h1 class="name">{{rating.username}}</h1>
                        <div class="star-wrapper">
                            <star :size="24" :score="rating.score"></star>
                            <span class="delivery" v-if="rating.deliveryTime">{{rating.deliveryTime}}</span>
                        </div>
                        <p class="text">{{rating.text}}</p>
                        <div class="recomment" v-if="rating.recommend">
                            <i class="icon-thumb_up"></i>
                            <span v-for="(item,recomment_index) in rating.recommend" :key="recomment_index"
                                  class="item">
                                {{item}}
                            </span>
                        </div>
                        <div class="time" v-if="rating.rateTime">
                            {{rating.rateTime.substring(0,19).replace('T',' ')}}
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="rating">
            <span>评分：</span>
            <el-rate v-model="score" show-score text-color="#ff9900" score-template="{value}"></el-rate>
            <div>
                <el-input v-model="ratingText" placeholder="发表评价"></el-input>
                <button @click="send" type="primary">发表</button>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import Star from "../star/star";
    import split from "../split/split";
    import BScroll from 'better-scroll';
    import {formatDate} from "../../../common/js/date";
    import {urlParse} from "@/common/js/util";

    const ALL = 2;

    export default {
        data() {
            return {
                score: 5,
                ratingText: '',
                ratings: [],
                ratingSelectParm: {
                    selectType: ALL,
                    onlyContent: true,
                    desc: {
                        all: '全部',
                        positive: '推荐',
                        negative: '吐槽'
                    }
                },
                info: ''
            }
        },
        created() {
            this.getRatings()
            this.info = urlParse(window.location.href);
        },
        components: {Star, split},
        props: {
            seller: {
                type: Object
            }
        },
        filters: {
            formatDate(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            }
        },
        methods: {
            needShow(type, text) {
                if (this.ratingSelectParm.onlyContent && !text) {
                    return false;
                }
                if (this.ratingSelectParm.selectType === ALL) {
                    return true;
                } else {
                    return type === this.ratingSelectParm.selectType;
                }
            },
            send() {
                this.$http.get("/api/rating/send", {
                    params: {
                        text: this.ratingText,
                        score: this.score,
                        username: decodeURI(this.info.nickname),
                        avatar: this.info.headimgurl,
                        productId: '0'
                    }
                }).then((response) => {
                    if (response.body.code == 0) {
                        this.$message({
                            message: "评论成功",
                            type: 'success',
                            customClass: 'alert-shadow'
                        });
                        this.getRatings()
                    }
                })
                this.ratingText = "";
            },
            getRatings() {
                this.$http.get('/api/ratings').then((response) => {
                    this.ratings = response.body;
                    // console.log(this.ratings)
                    this.$nextTick(() => {
                        this.scroll = new BScroll(this.$refs.ratings, {
                            click: true
                        })
                    });
                })
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../../common/stylus/mixin.styl";

    .ratings
        position absolute
        top 174px
        bottom 0
        left 0
        width 100%
        overflow hidden
        margin-bottom 80px

        .ratings-content
            .overview
                display flex
                padding 18px 0

                .overview-left
                    flex 0 0 137px
                    padding 6px 0
                    width 137px
                    border-right 1px solid rgba(7, 17, 27, 0.1)
                    text-align center
                    @media only screen and (max-width: 320px)
                        flex 0 0 120px
                        width 120px

                    .score
                        margin-bottom 6px
                        line-height 28px
                        font-size 24px
                        color rgb(255, 153, 0)

                    .title
                        margin-bottom 8px
                        line-height 12px
                        font-size 12px
                        color rgb(7, 17, 27)

                    .rank
                        line-height 10px
                        font-size 10px
                        color rgb(147, 153, 150)

                .overview-right
                    flex 1
                    padding 6px 0 6px 24px
                    @media only screen and (max-width: 320px)
                        padding-left 6px

                    .score-wrapper
                        margin-bottom 8px
                        font-size 0

                        .title
                            display inline-block
                            line-height 18px
                            vertical-align top
                            font-size 12px
                            color rgb(7, 17, 27)

                        .star
                            display inline-block
                            vertical-align top
                            margin 0 12px

                        .score
                            display inline-block
                            line-height 18px
                            vertical-align top
                            font-size 12px
                            color rgb(255, 153, 0)

                    .delivery-wrapper
                        font-size 0

                        .title
                            line-height 18px
                            font-size 12px
                            color rgb(7, 17, 27)

                        .delivery
                            font-size 12px
                            color rgb(147, 153, 159)
                            margin-left 12px

            .rating-wrapper
                padding 0 18px

                .rating-item
                    display flex
                    padding 18px 0
                    border-1px(rgba(7, 17, 27, 0.1))

                    .avatar
                        flex 0 0 28px
                        width 28px
                        margin-right 12px

                        img
                            border-radius 50%

                    .content
                        position relative
                        flex 1

                        .name
                            margin-bottom 4px
                            line-height 12px
                            font-size 10px
                            color rgb(7, 17, 27)

                        .star-wrapper
                            margin-bottom 6px
                            font-size 0

                            .star
                                display inline-block
                                margin-right 6px
                                vertical-align top

                            .delivery
                                display inline-block
                                vertical-align top
                                line-height 12px
                                font-size 10px
                                color rgb(147, 153, 159)

                        .text
                            margin-bottom 8px
                            line-height 18px
                            color rgb(7, 17, 27)
                            font-size 12px

                        .recomment
                            line-height 16px
                            font-size 0

                            .icon-thumb_up, .item
                                display inline-block
                                margin 0 8px 4px 0
                                font-size 9px

                            .icon-thumb_up
                                color rgb(0, 160, 220)

                            .item
                                padding 0 6px
                                border 1px solid rgba(7, 17, 27, 0.1)
                                border-radius 1px
                                color rgb(147, 153, 159)
                                background white

                        .time
                            position absolute
                            top 0
                            right 0
                            line-height 12px
                            font-size 10px
                            color rgb(147, 153, 159)

        .rating {
            position fixed
            bottom 0
            padding 10px
            background white
            width 100%
            box-sizing border-box

            .el-rate {
                display inline-block
            }

            .el-input {
                display inline-block
                width 76%
            }

            button {
                width 20%
                margin-left 10px
                background #409EFF
                border-radius 5px
                border none
                color white
                padding 10px
                box-sizing border-box
            }
        }
</style>
